<!DOCTYPE html>
<html>
<head>
<title>Physics Wave Sources Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.lineWidth = 2.5;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = 'bold 22px serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// Coordinates and dimensions
const cx = 250;
const cy = 200;
const len = 80; // Represents the distance λ/2

// Helper function to draw an arrowhead at a point with a given angle
function drawArrowhead(ctx, x, y, angle, size) {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(-size, -size / 2);
    ctx.lineTo(-size, size / 2);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

// Helper function to draw a fraction
function drawFraction(ctx, numerator, denominator, x, y) {
    ctx.font = 'bold 20px serif';
    const numeratorWidth = ctx.measureText(numerator).width;
    const denominatorWidth = ctx.measureText(denominator).width;
    const barWidth = Math.max(numeratorWidth, denominatorWidth) + 8;
    
    ctx.fillText(numerator, x, y - 11);
    ctx.beginPath();
    ctx.moveTo(x - barWidth / 2, y);
    ctx.lineTo(x + barWidth / 2, y);
    ctx.stroke();
    ctx.fillText(denominator, x, y + 11);
}

// --- Start Drawing ---

// Define endpoint coordinates for A, C, D relative to B
const ax = cx - len;
const ay = cy;
const cx_coord = cx + len;
const cy_coord = cy;
const dx = cx;
const dy = cy - len;

// Draw line from B to A
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(ax, ay);
ctx.stroke();
drawArrowhead(ctx, ax, ay, Math.PI, 12); // Arrow pointing left

// Draw line from B to C
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx_coord, cy_coord);
ctx.stroke();
drawArrowhead(ctx, cx_coord, cy_coord, 0, 12); // Arrow pointing right

// Draw line from B to D
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(dx, dy);
ctx.stroke();
drawArrowhead(ctx, dx, dy, -Math.PI / 2, 12); // Arrow pointing up

// Draw labels for points A, B, C, D
ctx.font = 'bold 22px serif';
ctx.fillText('A', ax - 20, ay);
ctx.fillText('B', cx - 10, cy + 20);
ctx.fillText('C', cx_coord + 20, cy_coord);
ctx.fillText('D', dx, dy - 20);

// Draw distance labels λ/2
// Label on segment AB
drawFraction(ctx, 'λ', '2', cx - len / 2, cy + 25);
// Label on segment BC
drawFraction(ctx, 'λ', '2', cx + len / 2, cy + 25);
// Label on segment BD
drawFraction(ctx, 'λ', '2', cx + 25, cy - len / 2);

// Draw receivers R1 and R2
// R1 point and label
const r1x = 100;
const r1y = 150;
ctx.beginPath();
ctx.arc(r1x, r1y, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.font = 'bold 24px serif';
ctx.fillText('R', r1x - 15, r1y + 5);
ctx.font = 'bold 16px serif';
ctx.fillText('1', r1x - 5, r1y + 12);

// R2 point and label
const r2x = cx;
const r2y = cy + 100;
ctx.beginPath();
ctx.arc(r2x, r2y, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.font = 'bold 24px serif';
ctx.fillText('R', r2x, r2y + 25);
ctx.font = 'bold 16px serif';
ctx.fillText('2', r2x + 12, r2y + 30);


// Draw the figure caption
ctx.font = 'bold 20px serif';
ctx.fillText('Fig. 4.2', cx, cy + 200);

</script>
</body>
</html>